<template>
  <div class="body">
    <el-container>
      <!-- 头部导航栏 -->
      <el-header>
        <Index></Index>
      </el-header>
      <!-- 左侧边栏 -->

      <el-container>
        <el-container>
          <el-main>
            <el-tabs
              tab-position="top"
              v-model="activeName"
              @tab-click="handleClick"
            >
              <el-tab-pane label="能量信息管理" name="first">
                <!-- <el-row style="margin-bottom:2rem">
                  <el-col :span="8">
                    <el-row style="margin-left:8rem">
                      <el-col style="padding-right:4rem" :span="12">
                        <el-input v-model="input" placeholder="ID值"></el-input>
                      </el-col>
                      <el-col :span="12">
                        <el-button type="primary" round>ID查询</el-button>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="8">
                    <el-row>
                      <el-col
                        style="padding-right:4rem;padding-left:4rem;"
                        :span="12"
                      >
                        <el-input
                          v-model="input"
                          placeholder="变压器类型"
                        ></el-input>
                      </el-col>
                      <el-col :span="12">
                        <el-button type="primary" round>类型查询</el-button>
                      </el-col>
                    </el-row>
                  </el-col>
                  <el-col :span="8">
                    <el-row>
                      <el-col
                        style="padding-right:4rem;padding-left:4rem;"
                        :span="12"
                      >
                        <el-input
                          v-model="input"
                          placeholder="所属变电站"
                        ></el-input>
                      </el-col>
                      <el-col :span="12">
                        <el-button type="primary" round
                          >所属变电站查询</el-button
                        >
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row> -->
                <div id="allmap">
                  <el-row>
                    <el-col :span="12">
                      <el-row>
                        <!-- <div class="newbutton" @click="handle_replace"></div> -->
                        <span
                          style="color:#90F0D0;font-size:2rem;font-weight:blod;"
                          >负荷分类管理</span
                        >
                      </el-row>
                      <el-row>
                        <div
                          id="topology-canvas"
                          class="full"
                          @contextmenu="onContextMenu($event)"
                        >
                          <el-table
                            :data="tableData"
                            style="width: 100%"
                            :row-style="getRowClass"
                            :header-row-style="getRowClass"
                            :header-cell-style="getRowClass2"
                            @cell-mouse-enter="changerow"
                          >
                            <el-table-column prop="name1" label="负荷名称">
                            </el-table-column>
                            <el-table-column prop="name2" label="负荷分类">
                            </el-table-column>
                            <el-table-column prop="name2" label="负荷编号">
                            </el-table-column>
                            <el-table-column prop="name3" label="负荷影响程度">
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-row>
                    </el-col>
                    <el-col :span="12">
                      <el-row>
                        <span
                          style="color:#90F0D0;font-size:2rem;font-weight:blod;"
                          >发电预测曲线</span
                        >
                      </el-row>
                      <el-row>
                        <div id="table4"></div>
                      </el-row>
                    </el-col>
                  </el-row>
                  <el-row>
                    <div>
                      <el-row>
                        <el-col :span="12">
                          <el-row>
                            <span
                              style="color:#90F0D0;font-size:2rem;font-weight:blod;"
                              >负荷用电管理</span
                            >
                          </el-row>
                          <div id="table1">
                            <el-table
                              :data="tableData1"
                              style="width: 100%"
                              :row-style="getRowClass"
                              :header-row-style="getRowClass"
                              :header-cell-style="getRowClass2"
                              @cell-mouse-enter="changerow"
                            >
                              <el-table-column
                                prop="name1"
                                label="负荷类型"
                                width="180"
                              >
                              </el-table-column>
                              <el-table-column
                                prop="name2"
                                label="负荷名称"
                                width="180"
                              >
                              </el-table-column>
                              <el-table-column prop="name3" label="负荷编号">
                              </el-table-column>
                              <el-table-column prop="name4" label="用电计划">
                              </el-table-column>
                              <el-table-column prop="name5" label="功率定值">
                              </el-table-column>
                              <el-table-column prop="name6" label="电量定值">
                              </el-table-column>
                            </el-table>
                          </div>
                        </el-col>
                        <el-col :span="12">
                          <el-row>
                            <span
                              style="color:#90F0D0;font-size:2rem;font-weight:blod;"
                              >发用能计划</span
                            >
                          </el-row>
                          <div id="table3"></div>
                        </el-col>
                      </el-row>
                    </div>
                  </el-row>
                </div>
              </el-tab-pane>
              <el-tab-pane label="分布式能源管理" name="second">
                <el-row>
                  <el-col :span="12">
                    <el-row>
                      <!-- <div class="newbutton" @click="handle_replace"></div> -->
                      <span
                        style="color:#90F0D0;font-size:2rem;font-weight:blod;"
                        >燃料管理</span
                      >
                    </el-row>
                    <el-row>
                      <div
                        id="table11"
                        class="full"
                        @contextmenu="onContextMenu($event)"
                      >
                        <el-table
                          :data="tableData3"
                          style="width: 100%"
                          height="333px"
                          :row-style="getRowClass"
                          :header-row-style="getRowClass"
                          :header-cell-style="getRowClass2"
                          @cell-mouse-enter="changerow"
                        >
                          <el-table-column prop="name1" label="发电装置名称">
                          </el-table-column>
                          <el-table-column prop="name2" label="发电装置编号">
                          </el-table-column>
                          <el-table-column
                            prop="name3"
                            label="燃料消耗/公斤/天"
                          >
                          </el-table-column>
                          <el-table-column prop="name4" label="剩余燃料/公斤">
                          </el-table-column>
                          <el-table-column prop="name5" label="燃料状态">
                          </el-table-column>
                        </el-table>
                      </div>
                    </el-row>
                  </el-col>
                  <el-col :span="12">
                    <el-row>
                      <span
                        style="color:#90F0D0;font-size:2rem;font-weight:blod;"
                        >检修状态管理</span
                      >
                    </el-row>
                    <el-row>
                      <div id="table12">
                        <el-table
                          :data="tableData4"
                          style="width: 100%"
                          height="333px"
                          :row-style="getRowClass"
                          :header-row-style="getRowClass"
                          :header-cell-style="getRowClass2"
                          @cell-mouse-enter="changerow"
                        >
                          <el-table-column prop="name1" label="发电装置名称">
                          </el-table-column>
                          <el-table-column prop="name2" label="发电装置编号">
                          </el-table-column>
                          <el-table-column prop="name3" label="检修状态">
                          </el-table-column>
                          <el-table-column prop="name4" label="检修时间设置">
                          </el-table-column>
                        </el-table>
                      </div>
                    </el-row>
                  </el-col>
                </el-row>
                <el-row>
                  <div>
                    <el-row>
                      <el-col :span="12">
                        <el-row>
                          <span
                            style="color:#90F0D0;font-size:2rem;font-weight:blod;"
                            >核电状态管理</span
                          >
                        </el-row>
                        <div id="table13">
                          <el-table
                            :data="tableData5"
                            style="width: 100%"
                            height="333px"
                            :row-style="getRowClass"
                            :header-row-style="getRowClass"
                            :header-cell-style="getRowClass2"
                            @cell-mouse-enter="changerow"
                          >
                            <el-table-column prop="name1" label="储能系统名称">
                            </el-table-column>
                            <el-table-column prop="name2" label="储能系统编号">
                            </el-table-column>
                            <el-table-column prop="name3" label="储能电量">
                            </el-table-column>
                            <el-table-column prop="name4" label="储能核电状态">
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-col>
                      <el-col :span="12">
                        <el-row>
                          <span
                            style="color:#90F0D0;font-size:2rem;font-weight:blod;"
                            >主电源管理</span
                          >
                        </el-row>
                        <div id="table14">
                          <el-table
                            :data="tableData6"
                            style="width: 100%"
                            height="333px"
                            :row-style="getRowClass"
                            :header-row-style="getRowClass"
                            :header-cell-style="getRowClass2"
                            @cell-mouse-enter="changerow"
                          >
                            <el-table-column prop="name1" label="电源名称">
                            </el-table-column>
                            <el-table-column prop="name2" label="电源编号">
                            </el-table-column>
                            <el-table-column prop="name3" label="电源电量">
                            </el-table-column>
                            <el-table-column prop="name4" label="电源状态">
                            </el-table-column>
                          </el-table>
                        </div>
                      </el-col>
                    </el-row>
                  </div>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-main>
        </el-container>
      </el-container>

      <!-- 表格显示区 -->

      <Bottom></Bottom>
    </el-container>
  </div>
</template>
<script>
import echarts from 'echarts'
// import MyCircle from '../components/MyCircle.vue'
import { Topology } from 'topology-core'
import { Node } from 'topology-core/models/node'
import { Line } from 'topology-core/models/line'
import * as FileSaver from 'file-saver'

import { Tools, canvasRegister } from '~/services/canvas'

import CanvasProps from '~/components/CanvasProps'
import CanvasContextMenu from '~/components/CanvasContextMenu'
import Index from '~/components/index2'
import Bottom from '~/components/bottom'
export default {
  data() {
    return {
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      tableData: [
        {
          name1: '电灯',
          name2: '普通负荷',
          name3: '1',
          name4: '2',
          name5: '危险'
        },
        {
          name1: '空调',
          name2: '大功率负荷',
          name3: '6',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '工厂机床',
          name2: '大功率负荷',
          name3: '3',
          name4: '9',
          name5: '危险'
        },
        {
          name1: '洗衣机',
          name2: '普通负荷',
          name3: '9',
          name4: '3',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险'
        }
      ],
      tableData1: [
        {
          name1: '电灯',
          name2: '普通负荷',
          name3: '1',
          name4: '2',
          name5: '危险',
          name6: '10'
        },
        {
          name1: '空调',
          name2: '大功率负荷',
          name3: '6',
          name4: '8',
          name5: '危险',
          name6: '10'
        },
        {
          name1: '工厂机床',
          name2: '大功率负荷',
          name3: '3',
          name4: '9',
          name5: '危险',
          name6: '10'
        },
        {
          name1: '洗衣机',
          name2: '普通负荷',
          name3: '9',
          name4: '3',
          name5: '危险',
          name6: '10'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险',
          name6: '10'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险',
          name6: '10'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险',
          name6: '10'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险',
          name6: '10'
        },
        {
          name1: '电信基站',
          name2: '大功率负荷',
          name3: '4',
          name4: '8',
          name5: '危险',
          name6: '10'
        }
      ],
      tableData3: [
        {
          name1: '燃气轮机',
          name2: '1',
          name3: '3',
          name4: '4',
          name5: '危险'
        },
        {
          name1: '柴油机',
          name2: '2',
          name3: '3',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '3',
          name3: '5',
          name4: '9',
          name5: '危险'
        },
        {
          name1: '柴油机',
          name2: '4',
          name3: '8',
          name4: '3',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '5',
          name3: '9',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '0.0v',
          name3: '6',
          name4: '9',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '6',
          name3: '0',
          name4: '2',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '7',
          name3: '3',
          name4: '9',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '8',
          name3: '5',
          name4: '1',
          name5: '危险'
        }
      ],
      tableData4: [
        {
          name1: '燃气轮机',
          name2: '1',
          name3: '正在检修中',
          name4: '4',
          name5: '危险'
        },
        {
          name1: '柴油机',
          name2: '2',
          name3: '检修完成',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '3',
          name3: '未检修',
          name4: '9',
          name5: '危险'
        },
        {
          name1: '柴油机',
          name2: '4',
          name3: '未检修',
          name4: '3',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '5',
          name3: '正在检修中',
          name4: '8',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '0.0',
          name3: '检修完成',
          name4: '9',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '6',
          name3: '检修完成',
          name4: '2',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '7',
          name3: '检修完成',
          name4: '9',
          name5: '危险'
        },
        {
          name1: '燃气轮机',
          name2: '8',
          name3: '检修完成',
          name4: '1',
          name5: '危险'
        }
      ],
      tableData5: [
        {
          name1: '储能系统',
          name2: '1',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '储能系统',
          name2: '2',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '储能系统',
          name2: '1',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '储能系统',
          name2: '3',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '储能系统',
          name2: '4',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '储能系统',
          name2: '5',
          name3: '70%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '储能系统',
          name2: '6',
          name3: '80%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '储能系统',
          name2: '7',
          name3: '12%',
          name4: '危险',
          name5: '危险'
        },
        {
          name1: '储能系统',
          name2: '8',
          name3: '10%',
          name4: '危险',
          name5: '危险'
        }
      ],
      tableData6: [
        {
          name1: '主电源',
          name2: '1',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '备用电源',
          name2: '2',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '备用电源',
          name2: '1',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '备用电源',
          name2: '3',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '备用电源',
          name2: '4',
          name3: '50%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '备用电源',
          name2: '5',
          name3: '70%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '备用电源',
          name2: '6',
          name3: '80%',
          name4: '正常',
          name5: '危险'
        },
        {
          name1: '备用电源',
          name2: '7',
          name3: '12%',
          name4: '危险',
          name5: '危险'
        },
        {
          name1: '备用电源',
          name2: '8',
          name3: '10%',
          name4: '危险',
          name5: '危险'
        }
      ],
      tools: Tools,
      canvas: {},
      canvasOptions: {
        rotateCursor: '/img/rotate.cur'
      },
      props: {
        a: null,
        node: null,
        line: null,
        nodes: null,
        multi: false,
        locked: false
      },
      contextmenu: {
        left: null,
        top: null,
        bottom: null
      },

      labelPosition: 'left',
      formLabelAlign: {
        name: '0.00w',
        region: '0.00kw',
        type: '0.00s',
        type2: '0.00s'
      },

      // icon: require('@/assets/images/onlinecar.png'),
      activeIndex: '3',

      activeName: 'first',
      activeName2: '1',

      center: { lng: 116.404, lat: 39.915 },
      zoom: 12,
      scroll: true,
      onlinelist: [],
      list1: [],
      list: [],
      offlinelist: [],
      online: [],
      offline: [],

      onlinenumber: 0,
      offlinenumber: 0,
      totalnumber: 0
    }
  },
  components: {
    CanvasProps,
    CanvasContextMenu,
    Index,
    Bottom
  },
  computed: {
    event() {
      return this.$store.state.event.event
    }
  },
  watch: {
    event(curVal) {
      if (this['handle_' + curVal.name]) {
        this['handle_' + curVal.name](curVal.data)
      }
    },
    $route(val) {
      this.open()
    }
  },
  created() {
    canvasRegister()
    //控制鼠标右键点击的面板当点击空白处时消失
    if (process.client) {
      document.onclick = event => {
        this.contextmenu = {
          left: null,
          top: null,
          bottom: null
        }
      }
    }
  },

  mounted() {
    this.canvasOptions.on = this.onMessage
    this.canvas = new Topology('topology-canvas', this.canvasOptions)
    this.open()

    //发用电计划

    let myChart3 = this.$echarts.init(document.getElementById('table3'))
    let option3 = {
      // backgroundColor: '#005A5B',
      title: {
        // text: '配电网(单位/伏特)',
        textStyle: {
          color: '#ffffff'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['配电网']
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#fff', //左边线的颜色
              width: '2' //坐标线的宽度
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          data: ['1.0', '2.0', '3.0', '4.0', '5.0', '6.0', '7.0']
        }
      ],
      yAxis: [
        {
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'white', //左边线的颜色
              width: '2' //坐标线的宽度
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          type: 'value'
        }
      ],
      series: [
        {
          name: '支路健康指数',
          type: 'line',
          stack: '总量',
          smooth: true, //曲线平滑
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default',
                //渐变色实现
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, //变化度
                  //三种由深及浅的颜色
                  [
                    {
                      offset: 0,
                      color: '#3ebf9b'
                    },
                    {
                      offset: 0.5,
                      color: '#267268'
                    },
                    {
                      offset: 1,
                      color: '#14323f'
                    }
                  ]
                )
              },
              lineStyle: {
                //线的颜色
                color: '#349e85'
              },
              //以及在折线图每个日期点顶端显示数字
              label: {
                show: false,
                position: 'top',
                textStyle: {
                  color: 'white'
                }
              }
            }
          },
          areaStyle: {},
          data: [2.3, 3.4, 4.5, 2.5, 1.4, 0.5, 3.6]
        }
      ]
    }
    myChart3.setOption(option3)
    //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    window.addEventListener('resize', function() {
      myChart3.resize()
    })
    //
    let myChart4 = this.$echarts.init(document.getElementById('table4'))
    let option4 = {
      // backgroundColor: '#005A5B',
      title: {
        // text: '配电网(单位/伏特)',
        textStyle: {
          color: '#ffffff'
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          label: {
            backgroundColor: '#6a7985'
          }
        }
      },
      legend: {
        data: ['配电网']
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#fff', //左边线的颜色
              width: '2' //坐标线的宽度
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          data: ['1.0', '2.0', '3.0', '4.0', '5.0', '6.0', '7.0']
        }
      ],
      yAxis: [
        {
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: 'white', //左边线的颜色
              width: '2' //坐标线的宽度
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#ffffff'
            }
          },
          type: 'value'
        }
      ],
      series: [
        {
          name: '支路健康指数',
          type: 'line',
          stack: '总量',
          smooth: true, //曲线平滑
          itemStyle: {
            normal: {
              areaStyle: {
                type: 'default',
                //渐变色实现
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1, //变化度
                  //三种由深及浅的颜色
                  [
                    {
                      offset: 0,
                      color: '#3ebf9b'
                    },
                    {
                      offset: 0.5,
                      color: '#267268'
                    },
                    {
                      offset: 1,
                      color: '#14323f'
                    }
                  ]
                )
              },
              lineStyle: {
                //线的颜色
                color: '#349e85'
              },
              //以及在折线图每个日期点顶端显示数字
              label: {
                show: false,
                position: 'top',
                textStyle: {
                  color: 'white'
                }
              }
            }
          },
          areaStyle: {},
          data: [2.3, 3.4, 4.5, 2.5, 1.4, 0.5, 3.6]
        }
      ]
    }
    myChart4.setOption(option4)
    //建议加上以下这一行代码，不加的效果图如下（当浏览器窗口缩小的时候）。超过了div的界限（红色边框）
    window.addEventListener('resize', function() {
      myChart4.resize()
    })
    //
  },

  methods: {
    openDetails(a, b) {
      this.$router.push({ path: '/healthdiagnosis/diagnosisdetails' })
    },
    async open() {
      if (!this.$route.query.id) {
        return
      }
      const data = await this.$axios.$get(
        '/api/topology/' + this.$route.query.id
      )
      if (data && data.id) {
        this.canvas.open(data.data)
      }
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#18EFF2;'
      return 'background:#050E11;color:#18EFF2;'
    },
    //设置表头颜色和背景
    getRowClass2({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#18EFF2;'
      return 'background:#050E11;color:#18EFF2;'
    },
    getRowClass3({ row, column, rowIndex, columnIndex }) {
      // return 'background:#444444;color:#F50C0C;'
      return 'background:#050E11;color:#18EFF2;'
    },
    handleDelete(index, row) {
      alert(index)
      //  this.$router.push({path:'/details',query: {id:item.device_id}})
      this.$router.push({ path: '/indexx' })
      console.log(index, row)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },

    logout() {
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },

    infoWindowClose(i) {
      //  alert("关闭提示窗"+i.showFlag)
      return (i.showFlag = false)
    },
    infoWindowOpen(i) {
      // alert("打开提示窗"+i.showFlag)
      return (i.showFlag = true)
    },
    opencarinfo(item) {
      //  this.$router.push({name:'details',params: {id:'1'}})
      // alert("执行")

      this.$router.push({ path: '/details', query: { id: item.device_id } })
    },

    handle_new(data) {
      this.canvas.open({ nodes: [], lines: [] })
    },

    handle_open(data) {
      this.handle_replace(data)
    },

    handle_replace(data) {
      const input = document.createElement('input')
      input.type = 'file'
      input.onchange = event => {
        const elem = event.srcElement || event.target
        if (elem.files && elem.files[0]) {
          const name = elem.files[0].name.replace('.json', '')
          const reader = new FileReader()
          reader.onload = e => {
            const text = e.target.result + ''
            try {
              const data = JSON.parse(text)
              if (
                data &&
                Array.isArray(data.nodes) &&
                Array.isArray(data.lines)
              ) {
                this.canvas.open(data)
              }
            } catch (e) {
              return false
            }
          }
          reader.readAsText(elem.files[0])
        }
      }
      input.click()
    },

    handle_save(data) {
      FileSaver.saveAs(
        new Blob([JSON.stringify(this.canvas.data)], {
          type: 'text/plain;charset=utf-8'
        }),
        // `le5le.topology.json`
        `11111.json`
      )
    },

    handle_savePng(data) {
      this.canvas.saveAsImage('le5le.topology.png')
    }
  }
}
</script>
<style lang="scss">
.el-tabs {
  width: 100%;
  color: white;
  background-image: url(../../assets/images/新UI12.png);
}
.el-tabs__item {
  padding: 0 20px;
  height: 40px;
  box-sizing: border-box;
  line-height: 40px;
  display: inline-block;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
  color: #e3e5ea;
  position: relative;
}
.el-table {
  background-color: #032121;
}
</style>
<style lang="scss" scoped>
.body {
  width: 100%;
  height: 100%;
  margin-top: 0px;
  background-image: url(../../assets/images/新UI12.png);
  background-repeat: no-repeat;
}
#topology-canvas {
  width: 99%;
  height: 333px;
  background-image: url(../../assets/images/新UI16.png);
}
#table11 {
  width: 99%;
  height: 333px;
  background-image: url(../../assets/images/新UI16.png);
}
//控制画布的大小
.full {
  flex: 1;
  width: initial;
  position: relative;
  overflow: auto;
  background: #fff;
  // background-image: url("+require('../assets/images/timg.jpg')")
}

#table1 {
  width: 99%;
  height: 333px;
  //
  background-image: url(../../assets/images/新UI16.png);
}

#table2 {
  width: 95%;
  height: 389px;

  background-color: #005b5c;
  background-image: url(../../assets/images/新UI46.png);
}

#table3 {
  width: 95%;
  height: 333px;
  margin-left: 3rem;
  background-image: url(../../assets/images/新UI16.png);
}
#table4 {
  width: 100%;
  height: 333px;

  margin-left: 3rem;

  background-image: url(../../assets/images/新UI16.png);
}
#table12 {
  width: 100%;
  height: 333px;

  margin-left: 3rem;

  background-image: url(../../assets/images/新UI16.png);
}
#table13 {
  width: 99%;
  height: 333px;
  //
  background-image: url(../../assets/images/新UI16.png);
}
#table14 {
  width: 95%;
  height: 333px;
  margin-left: 3rem;
  background-image: url(../../assets/images/新UI16.png);
}
#allmap {
  // height: 600px;
  // color: white;
  margin-top: 20px;
}
.newbutton {
  width: 284px;
  height: 48px;
  background-image: url(../../assets/images/新UI43.png);
  // border-color: #041214;
  display: inline-block;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
</style>
